<template>
	<view class="popup-content">
		<uni-easyinput v-model="selectText" suffixIcon="bottom" @focus="open" :placeholder="'请选择'+text"></uni-easyinput>
		<!--   下发类型   -->
		<uni-popup ref="type" type="bottom">
			<view class="popup-body">
				<view class="popup-title">选择下发类型</view>
				<view class="popup">
					<view class="" v-if="showArea">
						<view class="" v-for="(item,index) in type" :key="index">
							<view class="popup-item" @click="typeClick(item)">
								{{item.text}}
							</view>
						</view>
					</view>
					<view class="" v-else>
						<view class="" v-for="(item,index) in type" :key="index">
							<view class="popup-item" v-if="!showArea && item.value==='0'" @click="typeClick(item)">
								{{item.text}}
							</view>
						</view>
					</view>

				</view>
			</view>
		</uni-popup>
		<!--   选择区域   -->
		<uni-popup ref="area" type="bottom">
			<view class="popup-body">
				<view class="popup-title">选择区域名称</view>
				<view class="popup">
					<view class="popup-item" @click="areaClick(item)" v-for="item in areaData">{{item.text}}</view>
				</view>
			</view>
		</uni-popup>
		<!--   选择学校   -->
		<uni-popup ref="school" type="bottom">
			<view class="popup-body">
				<view class="popup-title">选择学校名称</view>
				<view class="popup">
					<view class="popup-item" @click="schoolClick(item)" v-for="item in school">{{item.text}}</view>
				</view>
			</view>
		</uni-popup>
		<!--   选择教师   -->
		<uni-popup ref="teacher" type="bottom">
			<view class="popup-body">
				<view class="popup-title">选择教师名称</view>
				<view class="popup popup-multiple">
					<uni-data-checkbox mode="button" v-model="selectData.teacher" multiple
						:localdata="teacher"></uni-data-checkbox>
				</view>
				<view class="popup-btn"><u-button @click="teacherClick" type="primary">确定</u-button></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getTeacher,
		getSchool
	} from '@/api/teach'
	export default {
		emits: ["onSelect"],
		props: {
			selectType: { //0表示：先选择区域然后选择学校。1表示：先选择按老师或者按区域，然后选择区域，最后选择老师。3表示：现在选择区域然后选择老师
				type: String,
				default: "1"
			},
			text: {
				type: String,
				default: ""
			},
			showType: {
				type: Boolean,
				default: true
			},
			showArea: {
				type: Boolean,
				default: true
			},

		},
		watch: {
			selectType: {
				handler(val) {
					this.select_type = val
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				selectText: "",
				select_type: "",
				type: [{
					value: "0",
					text: "按照老师"
				}, {
					value: "1",
					text: "按照区域"
				}],
				areaData: this.$store.state.teach.area,
				school: [],
				teacher: [],
				deviceId: this.$store.state.user.deviceId,
				selectData: {
					type: "",
					area: "",
					school: "",
					schoolCode: "",
					teacher: [],
				}
			}
		},
		methods: {
			open() {
				uni.hideKeyboard()

				if (this.select_type == "0" || this.select_type == "3") {
					this.$refs.area.open('bottom')
				} else {
					this.$refs.type.open('bottom')
				}
			},
			typeClick(data) {
				this.$refs.type.close();
				this.$refs.area.open('bottom');
				this.selectData.type = data.value;
			},
			areaClick(data) {
				this.selectData.area = data.value;
				if (this.select_type == "0") {
					//获取学校数据
					getSchool(data.value).then(res => {
						res.schools.forEach(item => {
							this.school.push({
								text: item.schoolName,
								value: item.schoolCode
							})
						});
						this.$refs.school.open('bottom');
						this.$refs.area.close();

					})
				} else if (this.select_type === "1") {
					if (this.selectData.type === "0") {
						getTeacher({
							deviceId: this.deviceId,
							code: data.value
						}).then(res => {
							res.users.forEach(item => {
								this.teacher.push({
									value: item.id,
									text: item.name
								})
							})
							this.$refs.teacher.open('bottom');
							this.$refs.area.close();
						})
					} else {
						this.selectData.teacher.push(data.value);
						this.selectText = data.text;
						this.$refs.area.close();
						this.$emit("onSelect", this.selectData);
					}
				} else if (this.select_type === "3") {
					getTeacher({
						deviceId: this.deviceId,
						code: data.value
					}).then(res => {
						res.users.forEach(item => {
							this.teacher.push({
								value: item.id,
								text: item.name
							})
						})
						this.$refs.teacher.open('bottom');
						this.$refs.area.close();
					})
				}



				/*this.selectData.area =data.value;
				this.$refs.area.close();
				if(this.select_type == "0"){
				    //获取学校数据
				    getSchool(data.value).then(res=>{
				        res.schools.forEach(item=>{
				            this.school.push({text:item.schoolName,value:item.schoolCode})
				        });
				        this.$refs.school.open('bottom')
				    })
				}else if(this.select_type == "1" && this.selectData.type=="0"){
				    //获取老师数据
				    getTeacher({deviceId:this.deviceId,code:data.value}).then(res=>{
				        res.users.forEach(item=>{
				            this.teacher.push({value:item.id,text:item.name})
				        })
				        this.$refs.teacher.open('bottom');
				    })
				}*/
			},
			schoolClick(data) {
				this.selectData.school = data.text;
				this.selectData.schoolCode = data.value;
				this.selectText = data.text;
				this.$emit("onSelect", this.selectData);
				this.$refs.school.close();
				// this.school.splice(0, this.school.length)
			},
			teacherClick() {
				let selectTeacher = []
				this.selectData.teacher.forEach(item => {
					let obj = this.teacher.find((key) => {
						return key.value === item;
					});
					if (obj) {
						selectTeacher.push(obj.text)
					}
				});
				this.selectText = selectTeacher.toString();
				this.$refs.teacher.close();
				this.$emit("onSelect", this.selectData);
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup-body {
		border-radius: 15px 15px 0 0;

		.popup-title {
			font-size: 16px;
			text-align: center;
			padding: 15px 0;
			border-bottom: 1px solid #eee;
			border-radius: 15px 15px 0 0;
			background: #fff;
		}

		.popup {
			background: #fff;
			height: 70vh;
			overflow-y: scroll;

			.popup-item {
				padding: 15px 0;
				border-bottom: 1px solid #eee;
				text-align: center;
			}
		}

		.popup-multiple {
			padding: 10px 15px;
		}
	}
</style>